<template>
  <!-- 提醒 -->
  <up-modal
    :show="showModal"
    title="温馨提示"
    :content="content"
    showCancelButton
    confirmColor="#ff5500"
    @confirm="exchange"
    @cancel="cancle"></up-modal>
  <view class="container">
    <img src="../../static/points.jpg" alt="" class="top-img" />
    <view class="title">
      <h2 class="mypoints">我的积分</h2>
      <div class="line"></div>
      <h1 class="points">{{ userStore.userInfo.points ?? 0 }}</h1>
      <!-- 劵包 -->
      <div class="package" @click="goCoupon">
        <img
          src="../../static/icon/juan.png"
          alt=""
          style="width: 70rpx; height: 70rpx" />
        <text style="color: #fff">劵 包</text>
      </div>
    </view>
    <!-- 公告信息 -->
    <view class="notice-contain">
      <u-notice-bar
        :text="texts"
        direction="column"
        color="#f6823e"
        font-size="28rpx"
        bgColor="#fff"></u-notice-bar>
    </view>
    <!-- 瀑布流 -->
    <view class="waterFall" v-if="couponsList.length > 0">
      <!-- 第一个盒子 -->
      <view class="item" v-for="item in couponsList" :key="item.id">
        <img
          src="../../static/redBag.jpg"
          alt=""
          style="
            width: 230rpx;
            height: 260rpx;
            position: relative;
            top: 10rpx;
            left: 30rpx;
          " />
        <text class="money">{{ item.money }}元通用优惠劵</text>
        <text class="need-point">{{ item.points }} 积分</text>
        <view class="btn" @click="toExchange(item)">兑换</view>

        <!-- 下架蒙层 -->
        <view class="mask" v-show="item.status === 1">暂时下架</view>
      </view>
    </view>
    <view class="empty" v-else>暂时没有~</view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { getAllCoupons, exchangeCoupons } from '../../api/coupons.js'
import { useUserStore } from '../../stores/user.js'
import { updateUserInfo } from '../../api/user.js'

const userStore = useUserStore()

const couponsList = ref([])
// 获取所有优惠劵信息
const getCouponsList = async () => {
  const res = await getAllCoupons()
  couponsList.value = res.data
}
getCouponsList()

const texts = ref([
  '首次购买满30元就可成为尊贵的会员用户',
  '会员用户在每次消费都会增加对应金额的积分',
  '会员用户才能享受积分兑换',
])

const showModal = ref(false)
const content = '您确认要兑换该优惠劵吗'
const exchangeId = ref(0)
const points = ref(0)
// 兑换按钮
const toExchange = (item) => {
  if (userStore.userInfo.member === 1) {
    uni.showToast({
      title: '抱歉，您还不是会员，暂时无法兑换',
      icon: 'none',
    })
    return false
  }
  showModal.value = true
  exchangeId.value = item.id
  points.value = item.points
}
// 取消按钮
const cancle = () => {
  showModal.value = false
}

const exchange = async () => {
  // 如果积分不足则提示
  if (userStore.userInfo.points < points.value) {
    uni.showToast({
      title: '积分暂时不够哦，可以去下单获取积分',
      icon: 'none',
    })
    showModal.value = false
    return false
  }

  // 构造数据
  const couponInfo = ref({
    userId: userStore.userInfo.userId,
    couponsId: exchangeId.value,
  })

  // 兑换
  const res = await exchangeCoupons(couponInfo.value)
  if (res.code === '0') {
    uni.showToast({
      title: '兑换成功',
      icon: 'success',
    })
    // 减去积分更新到stores中
    const remain = userStore.userInfo.points - points.value
    userStore.updatePoint(remain)

    // 更新到数据库中
    await updateUserInfo(userStore.userInfo)
  } else {
    uni.showToast({
      title: '兑换失败，请联系店家',
      icon: 'none',
    })
  }
  showModal.value = false
}

const goCoupon = () => {
  uni.navigateTo({
    url: '../../pages/coupon/coupon',
  })
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #f0f2f1;
  overflow: auto;
  .top-img {
    width: 100%;
    height: 400rpx;
    border-bottom-left-radius: 160rpx;
    border-bottom-right-radius: 160rpx;
  }
  .title {
    width: 90%;
    height: 200rpx;
    background-color: #fff;
    border-radius: 20rpx;
    position: absolute;
    top: 300rpx;
    left: 35rpx;
    .mypoints {
      margin-left: 20rpx;
      margin-top: 30rpx;
      letter-spacing: 2px;
    }
    .line {
      width: 100rpx;
      height: 8rpx;
      background: linear-gradient(to right, #f6c314, #e4d684);
      margin-left: 20rpx;
    }
    .package {
      width: 140rpx;
      height: 120rpx;
      border-radius: 20rpx;
      background-color: rgba(242, 204, 25, 0.5);
      font-size: 22rpx;
      display: flex;
      flex-direction: column;
      margin-left: 480rpx;
      margin-top: -150rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .points {
      width: 90rpx;
      font-size: 90rpx;
      margin-left: 20rpx;
    }
  }

  .notice-contain {
    width: 90%;
    position: absolute;
    top: 520rpx;
    left: 35rpx;
  }
  .waterFall {
    width: 90%;
    height: 900rpx;
    position: absolute;
    top: 610rpx;
    left: 35rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      width: 300rpx;
      height: 400rpx;
      background-color: #fff;
      border-radius: 20rpx;
      position: relative;
      .money {
        position: absolute;
        top: 290rpx;
        left: 28rpx;
        font-size: 24rpx;
      }
      .need-point {
        position: absolute;
        top: 350rpx;
        left: 28rpx;
        color: #f6823e;
        font-size: 26rpx;
      }
      .btn {
        width: 120rpx;
        height: 50rpx;
        border-radius: 25rpx;
        background: linear-gradient(to right, #ff6f1d, #fea244);
        position: absolute;
        top: 340rpx;
        right: 28rpx;
        color: #fff;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .mask {
        width: 300rpx;
        height: 400rpx;
        line-height: 400rpx;
        border-radius: 20px;
        color: #fff;
        font-size: 34rpx;
        font-weight: bold;
        text-align: center;
        background: rgba(0, 0, 0, 0.25);
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }

  .empty {
    font-size: 36rpx;
    color: #c1c1c1;
    letter-spacing: 6rpx;
    position: absolute;
    bottom: 400rpx;
    left: 280rpx;
  }
}
</style>
